<template>
  <div class="cm-detail-info">
    <div class="info-name">
      <svg-icon :name="'vs-location'" class-name="info-name-icon" size="32" />
      <label>{{ areaName }}</label>
    </div>
    <div class="info-m" v-if="dataList.length">
      <div
        class="info-m-item"
        v-for="(item, index) in dataList"
        :key="index + '-'"
      >
        <div class="info-m-item__header">{{ item.type }}</div>
        <div class="info-m-item__c">
          <template v-for="(n, m) in item.lists">
            <div class="info-m-item__c-i" :key="m + ''">
              <span class="c-i-name">{{ n.label }}</span>
              <span class="c-i-num">{{ n.value }}</span>
              <span class="c-i-unit">{{ n.unit }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CmDetailInfo",
  props: ["areaName", "dataList"],
  data() {
    return {
      // lists: [
      //   {
      //     type: "概况",
      //     lists: [
      //       { label: "户数", value: 28595, unit: "户" },
      //       { label: "宅基地", value: 26458, unit: "亩" },
      //       { label: "房屋", value: 57683745, unit: "m²" },
      //       { label: "人均宅基地", value: 24.36, unit: "m²" }
      //     ]
      //   },
      //   {
      //     type: "批准",
      //     lists: [
      //       { label: "户数", value: 28595, unit: "户" },
      //       { label: "宅基地", value: 26458, unit: "亩" },
      //       { label: "房屋", value: 57683745, unit: "m²" },
      //       { label: "人均宅基地", value: 24.36, unit: "m²" }
      //     ]
      //   },
      //   {
      //     type: "登记",
      //     lists: [
      //       { label: "户数", value: 28595, unit: "户" },
      //       { label: "宅基地", value: 26458, unit: "亩" },
      //       { label: "房屋", value: 57683745, unit: "m²" },
      //       { label: "人均宅基地", value: 24.36, unit: "m²" }
      //     ]
      //   },
      //   {
      //     type: "违法",
      //     lists: [
      //       { label: "户数", value: 28595, unit: "户" },
      //       { label: "宅基地", value: 26458, unit: "亩" },
      //       { label: "房屋", value: 57683745, unit: "m²" },
      //       { label: "人均宅基地", value: 24.36, unit: "m²" }
      //     ]
      //   }
      // ]
    };
  }
};
</script>

<style lang="less">
.cm-detail-info {
  margin-top: 48px;
  margin-left: 22px;
  width: 314px;
  height: 410px;
  /*background-color: rgba(255, 255, 255, 0.11);*/
  /*background-image: radial-gradient(*/
  /*  farthest-side at 46% 106%,*/
  /*  rgba(255, 255, 255, 0.11) 50%,*/
  /*  rgba(255, 255, 255, 0) 100%*/
  /*);*/
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  padding: 32px;
  box-sizing: border-box;
  .info-name {
    position: absolute;
    top: -20px;
    left: 32px;
    label {
      margin-left: 4px;
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      font-family: PingFangSC-Semibold;
    }
  }

  .info-m {
    .info-m-item {
      &__header {
        box-sizing: border-box;
        width: 250px;
        height: 25px;
        line-height: 25px;
        background-color: rgba(22, 48, 108, 0.6);
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
      }
      &__c {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 70px;
        &-i:nth-child(even) {
          text-align: right;
        }
        padding: 4px 0;
        box-sizing: border-box;
        &-i {
          width: 50%;
          font-size: 14px;
          .c-i-name {
            font-family: PingFangSC-Regular;
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 0;
            text-align: center;
          }
          .c-i-num {
            font-family: antonio;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
            margin: 0 3px;
          }
          .c-i-unit {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
  }
}
</style>
